<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { getCourseListApi } from "../../api/course.js";
import { getStudentListApi } from "../../api/student.js";

// 假设这些数据是从后端获取的
const studentData = ref([]);
const gradeData = [
  { student_id: 1, course_id: 1, score: 90 },
  { student_id: 2, course_id: 1, score: 85 },
  // 更多数据...
];

const courseData =ref([]);
const getCourseList = async () => {
  const { data: res } = await getCourseListApi();
  courseData.value = res.data; // 确保 res.data 是一个数组
  console.log(courseData.value);
};
const studentChartRef = ref(null);
const gradeChartRef = ref(null);
const courseChartRef = ref(null);

const getStudentList = async () => {
  const { data: res } = await getStudentListApi();
  studentData.value = res.data; // 确保 res.data 是一个数组
  console.log(studentData.value);
};

const initStudentChart = () => {
  const chartDom = studentChartRef.value;
  if (!chartDom) return; // 确保 DOM 元素已加载
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '学生分布'
    },
    tooltip: {},
    legend: {
      data: ['学生']
    },
    xAxis: {
      data: studentData.value.map(student => student.name) // 使用 studentData.value
    },
    yAxis: {},
    series: [{
      name: '学生',
      type: 'bar',
      data: studentData.value.map(student => student.age) // 使用 studentData.value
    }]
  };
  myChart.setOption(option);
};

const initGradeChart = () => {
  const chartDom = gradeChartRef.value;
  if (!chartDom) return; // 确保 DOM 元素已加载
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '学生成绩分布'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['成绩']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: gradeData.map(grade => `${grade.student_id}-${grade.course_id}`)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '成绩',
        type: 'line',
        data: gradeData.map(grade => grade.score)
      }
    ]
  };
  myChart.setOption(option);
};

const initCourseChart = () => {
  const chartDom = courseChartRef.value;
  if (!chartDom) return; // 确保 DOM 元素已加载
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '课程分布',
      x: "left"
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal', // 设置图例为水平方向
      left: 'center', // 设置图例居中对齐
      top: 'bottom', // 设置图例在底部
      type: 'scroll', // 设置图例可滚动
      align: 'left', // 设置图例左对齐
      padding: 10, // 设置图例内边距
      itemWidth: 25, // 设置图例项的宽度
      itemHeight: 14, // 设置图例项的高度
      itemGap: 20, // 设置图例项之间的间距
    },
    series: [
      {
        name: '课程',
        type: 'pie',
        radius: '50%',
        data: courseData.value.map(course => ({
          name: course.course_name,
          value: 1 // 这里假设每个课程计数为1
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }
    ]
  };
  myChart.setOption(option);
};


onMounted(() => {
  Promise.all([getCourseList(), getStudentList()]).then(() => {
    initStudentChart();
    initGradeChart();
    initCourseChart();
  });
});
</script>

<template>
  <div style="display: flex; justify-content: space-around;">
    <el-card style="width: 30%;">
      <div ref="studentChartRef" style="width: 100%; height: 400px;"></div>
    </el-card>
    <el-card style="width: 30%;">
      <div ref="gradeChartRef" style="width: 100%; height: 400px;"></div>
    </el-card>
    <el-card style="width: 30%;">
      <div ref="courseChartRef" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
